<template>
  <div class="myImage">

    <view style="margin-bottom: 20rpx;" v-for="(item,index) in 10" :key="index" class="u-page">
        <view class="u-demo-block">
            
            <view class="u-demo-block__content">
                <view class="album">
                    <view class="album__avatar">
                        <uv-image
                            src="https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png"
                            
                            height="50rpx"
                            width="50rpx"
                           
                        ></uv-image>
                    </view>
                    <view class="album__content">
                        <uv-text
                        size="28rpx"
                                text="姜昊个人相册"
                                type="primary"
                                bold
                            
                        ></uv-text>
                        
                        <uv-text
                        size="24rpx"
                                margin="20rpx 0 20rpx 0"
                                text="天气非常好，今天日期2024-4-23"
                        ></uv-text>
                        <uv-album multipleSize="90" width="100%" :urls="urls" keyName="src2"></uv-album>
                    </view>
                </view>
            </view>
        </view>
    </view>
  </div>
</template>

<script setup>

let 	urls = [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]

</script>

<style lang="scss" scoped>
.myImage{
  padding: 20rpx;
}

.album {
        
        display: flex;
        align-items: flex-start;

        &__avatar {
            
             padding: 5px;
             border-radius: 3px;
         }
    
        &__content {
             margin-left: 10px;
             flex: 1;
         }
    }
</style>